<template>
    <div>
        <br>
        <div><el-button type="primary"  @click="shan()" class="but">膳食方案</el-button>
        <el-button type="primary" @click="yun()" class="but">运动方案</el-button>
        <el-button type="primary" @click="gan()" class="but">干预计划</el-button>
        </div>
        <el-table :data="tab"  border  stripe="true" style="width: 90%; margin-left:5%;" id="tbb">
            <el-table-column prop="cn" style="width: 25%; text-align: center;">
            </el-table-column>
            <el-table-column prop="food" style="width: 25%; text-align: center;">
            </el-table-column>
            <el-table-column prop="fn" style="width: 25%; text-align: center;">
            </el-table-column>
            <el-table-column prop="srn" style="width: 25%; text-align: center;">
            </el-table-column>
        </el-table>
         <el-table :data="tabxs"  border  stripe="true" style="width: 90%; margin-left:5%;display:none" id="tbbs">
            <el-table-column prop="cn" style="width:33%; text-align: center;">
            </el-table-column>
            <el-table-column prop="food" style="width:33%; text-align: center;">
            </el-table-column>
            <el-table-column prop="fn" style="width:33%; text-align: center;">
            </el-table-column>
        </el-table>

    </div>
</template>
<script>
export default {
    data(){
        return{
        tab:[

        ],
        tabs:[
            {cn:"餐次",food:"推荐食物",fn:"分量",srn:"摄入量"},
            {cn:"1",food:"面包、牛奶",fn:"50g",srn:"20k"},
            {cn:"2",food:"面包、牛奶",fn:"50g",srn:"20k"},
            {cn:"3",food:"面包、牛奶",fn:"50g",srn:"20k"}
        ],
        tabss:[
            {cn:"运动名称",food:"运动时长",fn:"运动周期",srn:"消耗量"},
            {cn:"跑步",food:"30min",fn:"每天",srn:"20kal"},
            {cn:"仰卧起坐",food:"15min",fn:"每两天",srn:"88kal"},
            {cn:"俯卧撑",food:"10min",fn:"每三天",srn:"100kal"},
            {cn:"平板支撑",food:"3min",fn:"每周",srn:"123kal"}
        ],
        tabxs:[
            {cn:"干预时间",food:"干预形式",fn:"主要内容"},
            {cn:"三餐",food:"营养饮食",fn:"减少食盐"},
            {cn:"三餐",food:"营养饮食",fn:"增加钙摄入"},
            {cn:"每天",food:"运动指导",fn:"有氧代谢运动"},
            {cn:"早晚",food:"中医养生",fn:"按摩足部穴位"},
        ]
    }
    },
    methods:{
        shan(){
            this.tab=this.tabs
            document.getElementById("tbb").style="width: 90%; margin-left:5%";
            document.getElementById("tbbs").style.display="none";
        },
        yun(){
            this.tab=this.tabss
            document.getElementById("tbb").style="width: 90%; margin-left:5%";
            document.getElementById("tbbs").style.display="none";
        },
        gan(){
            document.getElementById("tbb").style.display="none";
            document.getElementById("tbbs").style="width: 90%; margin-left:5%";
        }
    },
     created(){
        this.$store.commit("getUsers");
            if(sessionStorage.getItem("user")==null||sessionStorage.getItem("pwd")==null){
            this.$router.push("/logg")
        }
         this.axios.post('abb/ch',{username:sessionStorage.getItem("user"),pwd:sessionStorage.getItem("pwd")}).then(response=>{
             console.log(response.data)
             this.user=response.data;
         })
         this.shan()
          document.getElementById("tbbs").style.display="none";
    }

}
</script>
<style scoped>
    .but{
        width: 32%;
    }

</style>